<template>
  <div class="loginbox">
    <h2>Glad to see you</h2>
    <p class="gray">Login to continue using Wholesale</p>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" layout="vertical">
      <a-form-model-item ref="username" label="Email" prop="username">
        <a-input v-model="form.username" />
      </a-form-model-item>
      <a-form-model-item ref="password" label="Password" prop="password">
        <a-input v-model="form.password" />
      </a-form-model-item>

      <a-form-model-item>
        <a-button type="primary" block @click="onSubmit"> Login </a-button>
      </a-form-model-item>
    </a-form-model>
    <p>Having trouble logging in ? <a>Contact us </a></p>
    <a-button type="primary" block @click="onVuex"> 跳转 </a-button>
    <hr/>
    <a-button type="primary" block @click="add"> vuex:{{$store.state.count}} </a-button>
    <hr/>
    <a-button type="primary" block @click="add"> watch:{{other}} </a-button>
    {{watch}}<a-input v-model="watch" />
  </div>
</template>
<script>
import axios from "axios";
import '@/mock/mock'
import {mapMutations} from "vuex"

export default {
  data() {
    return {
      watch:111,
      other: "watch",
      form: {
        username: "demo",
        password: "demo001",
      },
      rules: {
        username: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { min: 4, message: "邮箱长度必须大于4位", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, message: "密码长度必须大于6位", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    axios.get('/yanyin/data').then((res)=>{
      this.form.username = res.data.data.nickname
      console.log(res)
    })
  },
  methods: {
    ...mapMutations(["add"]),//相同写法...mapMutations({add:"add"})   前面是点击事件 后面是mutation里的
    // add(){ 
    //   // this.$store.commit('add')
    //   this.$store.dispatch('countAdd')
    // },
    onVuex(){
      this.$router.push({path: "/about"})

    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          axios({
            method: "post",
            url: "/api/login",
            data: this.form,
          }).then((e) => {
            console.log(e);
            if (e.data.code == -1) {
              this.$message.error(e.data.msg);
            } else {
              this.$message.success("登录成功");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
  watch:{
    watch(newValue){
      this.other = newValue;
      console.log(newValue)
    },
    "form.username":function(newValue){
      this.other = newValue;
      console.log(newValue)
    },
    form:{
      deep:true,
      handler:function(newValue){
        console.log(newValue)
      }
    }
  }
};
</script>

<style>
.loginbox {
  width: 410px;
  height: 410px;
  padding: 30px;
  margin: 100px auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
.gray {
  color: gray;
}
</style>
